﻿<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="SelectImages.ascx.cs" Inherits="MpSoft.Web.AdminCP.ToolsBar.SelectImages" %>
<%--<table cellpadding="0" cellspacing="0" border="0" class="tbl_edit_form_news">
    <tbody>
        <tr>
            <td colspan="2" class="function_form">
                <span>Thêm mới hình ảnh</span>
            </td>
        </tr>
        <tr class="bg_white">
            <td class="title_form">Ảnh:
            </td>
            <td class="control_form">
                <input name="txtPathImage" type="text" id="txtPathImage" style="width: 320px;">
                <input type="button" value="Ảnh..." id="Button7" onclick="BrowseServer('txtPathImage')">
                <input type="button" name="cmdAddImage" value="Thêm ảnh" id="cmdAddImage" onclick="addImage('txtPathImage')">
            </td>
        </tr>
    </tbody>
</table>--%>
<div class="form-group">
    <label class="control-label col-sm-2">Thêm mới hình ảnh: </label>
    <div class="col-sm-10">
        <input type="text" class="form-base" style="width: 50%;" placeholder="Ảnh..." id="txtPathImage" onclick="BrowseServer('txtPathImage')">
        <input type="button" value="Ảnh..." id="Button7" onclick="BrowseServer('txtPathImage')">
        <input type="button" name="cmdAddImage" value="Thêm ảnh" id="cmdAddImage" onclick="addImage('txtPathImage')">
    </div>
</div>
<table id="listImage" class="table" cellspacing="0" style="border-collapse: collapse; border-color: #ccc;" border="1">
    <thead>
        <tr class="header_grv">
            <th class="tb-stt">STT</th>
            <th>Ảnh</th>
            <th class="tb-gen-2">Nổi bật</th>
            <th class="tb-gen-2">chức năng
            </th>
        </tr>
    </thead>
    <tbody></tbody>
</table>

<asp:HiddenField ID="hdImages" runat="server" />
<asp:HiddenField ID="hdshowImage" runat="server" />

<script type="text/javascript">
    var arrImage = String('<%= Images %>'.trim()).split(",");
    var showimg = String('<%= ShowImage %>').trim().toLowerCase();
    function addImage(value) {
        if (imageExists($("#" + value).val()) == true) {
            $("#listImage > tbody").append("<tr>" +
                   "<td class='tb-stt'>" + ($("#listImage > tbody > tr").length + 1) + "</td>" +
                   "<td class='title_grv'><img id='img_" + $("#listImage > tbody > tr").length + "' src='" + $("#" + value).val() + "' style='max-height:35px'/></td>" +
                   "<td class='tb-gen-2'><input type='radio' name='listimage' onclick='SelectShowImage()' /> </td>" +
                    "<td class='tb-gen-2'> <a title='Sửa ảnh' href='#' onclick='BrowseServeImage(\"img_" + $("#listImage > tbody > tr").length + "\")'>Sửa</a>" +
                   " <a class='delrow' title='Xóa ảnh' href='#'>Xóa</a> </td>" +
                   "</tr>");
            tbDelRow();
            $(".delrow").bind("click", tbDelRow);
            arrImage[arrImage.length] = $("#" + value).val();
            SelectImages();
            SelectShowImage();
            $("#" + value).val("");
        } else alert("Tấm ảnh này đã có hoặc bạn chưa chọn ảnh, xin chọn lại tấm khác!");
    }
    function imageExists(value) {
        var tableImage = $("#listImage > tbody > tr > td > img");
        value = String(value).trim().toLowerCase();
        var tmp = "";
        if (value.length < 1)
            return false;
        for (i = 0; i < tableImage.length; i++) {
            tmp = String($(tableImage[i]).attr("src")).toLowerCase();
            if (tmp.localeCompare(value) == 0)
                return false;
        }
        return true;
    }
    function showImage() {
        for (i = 0; i < arrImage.length; i++) {
            if (arrImage[i] != "") {

                $("#listImage > tbody").append("<tr>" +
                   "<td class='tb-stt'>" + ($("#listImage > tbody > tr").length + 1) + "</td>" +
                   "<td class='title_grv'><img id='img_" + $("#listImage > tbody > tr").length + "' src='" + arrImage[i] + "' style='max-height:35px'/></td>" +
                   "<td class='tb-gen-2'><input " + (arrImage[i].toLowerCase().localeCompare(showimg) == 0 ? "checked='checked'" : "") +
                   " type='radio' name='listimage' onclick='SelectShowImage()' /> </td>" +
                   "<td class='tb-gen-2'> <a title='Sửa ảnh' href='#' onclick='BrowseServeImage(\"img_" + $("#listImage > tbody > tr").length + "\")'>Sửa</a>" +
                   " <a class='delrow' title='Xóa ảnh' href='#'>Xóa</a> </td>" +
                   "</tr>");
                tbDelRow();
            }
        }
    }
    function tbDelRow() {
        $("#listImage > tbody tr td a").click(function (ev) {
            ev.preventDefault();
        });
        $("#listImage > tbody tr td a.delrow").click(function (ev) {
            ev.preventDefault();
            var par = $(this).parent().parent();
            par.remove();
        });
    }
    function SelectShowImage() {
        var radio = $("#listImage > tbody input[type=radio]");
        for (i = 0; i < radio.length; i++) {
            if ($(radio[i]).prop("checked")) {
                $("#<%= hdshowImage.ClientID %>").val($("#img_" + (i)).attr("src"));
            }
        }
    }
    function SelectImages() {
        var imgs = $("#listImage > tbody tr td img");
        var images = "";
        for (i = 0; i < imgs.length; i++) {
            if (images.localeCompare("") != 0)
                images += "," + $(imgs[i]).attr("src");
            else images = $(imgs[i]).attr("src");
        }
        $("#<%= hdImages.ClientID %>").val(images);
    }
    showImage();
    SelectShowImage();
</script>
